<template>
  <transition>
    <div :class="['app-left', !show && 'shrink']">
      <div class="wrapper">
        <!-- 主体内部插槽 -->
        <div class="list-bg">
          <slot name="left-body"></slot>
        </div>

        <div class="expand-icon" @click="expand">
          <ExpandIcon />
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import useUserStore from '@/stores/base'
import ExpandIcon from '@/components/Svgs/expand-arrow.vue'
const userStore = useUserStore()

const show = computed(() => userStore.leftExpanded)
const { proxy } = getCurrentInstance()
const expand = () => {
  userStore.toggleLeftExpand()
}

onMounted(() => {})
</script>
<style scoped lang='scss'>
.app-left {
  position: fixed;
  padding-top: 20px;
  padding-bottom: 20px;
  top: calc(var(--header-height) + 7px);
  left: 0;
  width: 386px;
  bottom: 50px;
  z-index: 2;

  background: linear-gradient(
    90deg,
    #182f4b 0%,
    rgba(24, 47, 75, 0.6336) 96%,
    rgba(24, 47, 75, 0) 100%
  );
  backdrop-filter: blur(10px);
  pointer-events: none;
  transition: transform 0.3s;

  &.shrink {
    transform: translateX(-360px);
    .wrapper {
      .expand-icon {
        transform: rotateY(0);
      }
    }
  }
  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    .list-bg {
      overflow-x: hidden;
      pointer-events: all;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }

    .expand-icon {
      position: absolute;
      cursor: pointer;
      transform: rotateY(180deg);
      right: 0;
      top: 0;
      width: 18px;
      height: 18px;
      z-index: 1;
      pointer-events: all;
    }
  }
}
</style>